<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>广告管理</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>

    <!--	文件上传-->
    <link href="/js/bootstrap-fileinput/css/fileinput.css" rel="stylesheet">
    <script src="/js/bootstrap-fileinput/js/fileinput.js"></script>
    <script src="/js/bootstrap-fileinput/js/locales/zh.js"></script>


</head>

<body class="hold-transition skin-red sidebar-mini">
<!-- .box-body -->

<div class="box-header with-border">
    <h3 class="box-title">广告管理</h3>
</div>

<div class="box-body">

    <!-- 数据表格 -->
    <div class="table-box">

        <!--工具栏-->
        <div class="pull-left">
            <div class="form-group form-inline">
                <div class="btn-group">
                    <button type="button" class="btn btn-default" title="新建" data-toggle="modal"
                            data-target="#editModal"><i class="fa fa-file-o"></i> 新建
                    </button>
                    <button type="button" class="btn btn-default" title="删除" id="deleteCheck" ><i
                            class="fa fa-trash-o"></i> 删除
                    </button>
                    <button type="button" class="btn btn-default" title="开启" onclick='confirm("你确认要开启吗？")'><i
                            class="fa fa-check"></i> 开启
                    </button>
                    <button type="button" class="btn btn-default" title="屏蔽" onclick='confirm("你确认要屏蔽吗？")'><i
                            class="fa fa-ban"></i> 屏蔽
                    </button>
                    <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i
                            class="fa fa-refresh"></i> 刷新
                    </button>
                </div>
            </div>
        </div>
        <div class="box-tools pull-right">
            <div class="has-feedback">

            </div>
        </div>
        <!--工具栏/-->

        <!--数据列表-->
        <table id="dataList" class="table table-bordered table-striped table-hover dataTable">
            <thead>
            <tr>
                <th class="" style="padding-right:0px">
                    <input id="selall" type="checkbox" class="icheckbox_square-blue">
                </th>
                <th class="sorting_asc">广告ID</th>
                <th class="sorting">分类ID</th>
                <th class="sorting">标题</th>
                <th class="sorting">URL</th>
                <th class="sorting">图片</th>
                <th class="sorting">排序</th>
                <th class="sorting">是否有效</th>
                <th class="text-center">操作</th>
            </tr>
            </thead>
            <tbody id="content_tbody">
            </tbody>
        </table>
        <!--数据列表/-->
    </div>
    <!-- 数据表格 /-->
</div>
<!-- /.box-body -->


<!-- 增加窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">广告编辑</h3>
            </div>
            <div class="modal-body">

                <table class="table table-bordered table-striped" width="800px">
                    <tr>
                        <td>广告分类</td>
                        <td>
                            <select id="content_select1" style="width: 100%" class="form-control">
                                <option th:each="con : ${contentCatList}" th:value="${con.id}"
                                        th:text="${con.name}"></option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>标题</td>
                        <td><input class="form-control" placeholder="标题" id="title"></td>
                    </tr>
                    <tr>
                        <td>URL</td>
                        <td><input class="form-control" placeholder="URL" id="url"></td>
                    </tr>
                    <tr>
                        <td>排序</td>
                        <td><input class="form-control" placeholder="排序" id="sortOrder"></td>
                    </tr>
                    <tr>
                        <td>广告图片</td>
                        <td>
                            <table>
                                <tr>
                                    <td>
                                        <input type="file" id="myFile1" name="myFile" multiple/>
                                        <input type="hidden" name="paddress" id="paddress">
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>是否有效</td>
                        <td>
                            <input type="checkbox" class="icheckbox_square-blue">
                        </td>
                    </tr>
                </table>

            </div>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="saveContent()">保存
                </button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>

<!-- 编辑修改窗口 -->
<div class="modal fade" id="editModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel2">广告编辑</h3>
            </div>
            <div class="modal-body">

                <table class="table table-bordered table-striped" width="800px">
                    <input type="hidden" id="content_id">
                    <tr>
                        <td>广告分类</td>
                        <td>
                            <select id="content_select2" style="width: 100%" class="form-control">
                                <option th:each="con : ${contentCatList}" th:value="${con.id}"
                                        th:text="${con.name}"></option>
                            </select>
                        </td>
                    </tr>
                    <tr>
                        <td>标题</td>
                        <td><input class="form-control" placeholder="标题" id="title2"></td>
                    </tr>
                    <tr>
                        <td>URL</td>
                        <td><input class="form-control" placeholder="URL" id="url2" ></td>
                    </tr>
                    <tr>
                        <td>排序</td>
                        <td><input class="form-control" placeholder="排序" id="sortOrder2"></td>
                    </tr>
                    <tr>
                        <td>广告图片</td>
                        <td>
                            <table>
                                <tr>
                                    <td>
                                        <input type="hidden" id="myFileId" disabled="disabled">
                                        <input type="file" id="myFile" name="myFile" multiple/>
                                        <input type="hidden" name="paddress" id="paddress2">
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td>是否有效</td>
                        <td>
                            <input type="checkbox" class="icheckbox_square-blue">
                        </td>
                    </tr>
                </table>

            </div>
            <div class="modal-footer">
                <button class="btn btn-success" data-dismiss="modal" aria-hidden="true" onclick="updateContent()">保存
                </button>
                <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">关闭</button>
            </div>
        </div>
    </div>
</div>
</body>

</html>

<script type="text/javascript">
    var pic = '';

    function getContentById(id) {
        var pic2 = '';
        $.ajax({
            url: "/content/getById",
            data: {id: id},
            dataType: "json",
            type: "post",
            success: function (result) {
                if (result.code == "1") {
                    var content = result.data;
                    $("#content_id").val(content.id);
                    $("#title2").val(content.title);
                    $("#url2").val(content.url);
                    $("#status2").val(content.status);
                    $("#sortOrder2").val(content.sortOrder);
                    $("#myFileId").val(content.pic);
                    var ops = $("#content_select2").find("option")
                    for (var i = 0; i < ops.length; i++) {
                        var id = $(ops[i]).val()
                        if (id == content.categoryId) {
                            $(ops[i]).attr("selected", true)
                        }
                    }
                    //设置图片上传
                    $('#myFile').fileinput({
                        language: 'zh',
                        uploadUrl: "http://127.0.0.1:9099/file/upload",
                        //showCaption: false,    //显示框    默认是ture 显示      false  不显示
                        // showUpload: true,     //默认true，设置为false是不显示右下角那个上传按钮
                        // showRemove: true,     //默认true，设置为false是不显示右下角那个上传按钮
                        // showClose: false,      //默认为true，设置为false时不显示右上角的小叉（这个叉的作用就是移除当前所有文件区中的文件）
                        showPreview: true,   //默认true，设置为false时默认不显示整个文件区，自然就无法拖曳文件进行上传了。
                        // showCancel:false,　　       //默认true，只在ajax上传模式中可用，在上传过程中右下角有一个取消按钮，可以取消上传
                        // showUploadedThumbs:true,　　//默认为true，这个属性是基于这样一个使用方法的：选择若干个文件后点击右下角上传按钮批量上传，待全部完成后再选择一批文件，此时之前上传成功的文件是否要保存
                        browseClass: 'btn btn-primary',//按钮样式
                        allowedFileExtensions: ["txt", "gif", "png", "jpg","mp4"], //该文件上传的后缀名
                        maxFileSize: 20480000,//文件上传的大小
                        maxFileCount: 3,//文件上传的最大数量
                        encoding: "multipart/form-data",
                        initialPreviewAsData: true,//是否初始预览图片
                        initialPreviewFileType: 'image',//回显文件类型(初始预览文件类型)
                        initialPreview:content.pic//图片回显(初始预览图片地址)
                    });
                    pic2 = content.pic;
                }
            }, error: function (result) {
                alert("系统异常")
            }
        })


    }

    $(function () {
        getData();
        //设置图片上传
        $('#myFile1').fileinput({
            language: 'zh',
            uploadUrl: "http://127.0.0.1:9099/file/upload",
            browseClass: 'btn btn-primary',//按钮样式
            allowedFileExtensions: ["txt", "gif", "png", "jpg", "mp4"], //该文件上传的后缀名
            maxFileSize: 2048000000,//文件上传的大小
            maxFileCount: 3,//文件上传的最大数量
            encoding: "multipart/form-data",
            initialPreviewAsData: true,//是否初始预览图片
            initialPreviewFileType: 'image',//回显文件类型(初始预览文件类型)
        });

        $('#myFile1').on('fileuploaded',function (even,data,previewId,index){
            console.log(data.response);
            //文件上传
            if(data.response!=null){
                $("#paddress").val(data.response.imgUrl);
            }
            if(data.response.code=="1"){
                alert("上传成功");
                var url = data.response.data;
                console.log(url);
                pic=url;
            }
        })

        $('#myFile').on('fileuploaded',function (even,data,previewId,index){
            console.log(data.response);
            // alert(data.response);
            //文件上传
            if(data.response!=null){
                $("#paddress2").val(data.response.imgUrl);
            }
            if(data.response.code=="1"){
                alert("上传成功");
                var url = data.response.data;
                console.log(url);
                pic=url;
            }
        })

    })

    function getData() {
        $.ajax({
            url: "/content/getAll",
            data: {},
            dataType: "json",
            type: "get",
            success: function (result) {
                if (result.code == "1") {
                    var content = result.data;
                    var html = '';
                    $.each(content, function (i, e) {
                        html += '<tr>';
                        html += '<td><input type="checkbox" name="box" value="' + e.id + '"></td>';
                        html += '<td>' + e.id + '</td>';
                        html += '<td>' + e.categoryId + '</td>';
                        html += '<td>' + e.title + '</td>';
                        html += '<td>' + e.url + '</td>';
                        html += '<td>';
                        html += '<img  src="' + e.pic + '" width="100px" height="50px">';
                        html += '</td>';
                        html += '<td>' + e.sortOrder + '</td>';
                        html += '<td>' + e.status + '</td>';
                        html += '<td className="text-center">';
                        html += '<button type="button" className="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal2" onclick="getContentById(' + e.id + ')">修改';
                        html += '</button>';
                        html += '</td>';
                        html += '</tr>';
                    })
                    $("#content_tbody").html(html);
                }
            },
            error: function (result) {
                alert("系统异常")
            }
        })
    }

    //增加
    function saveContent() {
        $.ajax({
            url: "/content/insert",
            data: {
                categoryId: $("#content_select1").val(),
                title: $("#title").val(),
                url: $("#url").val(),
                pic: pic,
                sortOrder: $("#sortOrder").val(),
                status: 1
            },
            dataType: "json",
            type: "post",
            success: function (result) {
                if (result.code == "1") {
                    alert(result.message)
                    window.location.reload();
                }
            }, error: function (result) {

            }
        })
    }

    function updateContent() {
        $.ajax({
            url: "/content/update",
            data: {
                id: $("#content_id").val(),
                categoryId: $("#content_select2").val(),
                title: $("#title2").val(),
                url: $("#url2").val(),
                pic: pic,
                sortOrder: $("#sortOrder2").val(),
                status: 1
            },
            dataType: "json",
            type: "post",
            success: function (result) {
                if (result.code == "1") {
                    alert(result.message)
                    window.location.reload();
                }
            }, error: function (result) {

            }
        })
    }

    $(function () {
        $("#deleteCheck").click(function () {
            var ids = [];
            $("[type=checkbox]").each(function (i, v) {
                if (v.checked) {
                    ids.push(v.value);
                }
            })
            if (ids.length > 0) {
                if (confirm("确认要删除吗??")) {
                    $.ajax({
                        url: "/content/deleteCheck?ids=" + ids,
                        data: {ids: ids},
                        dataType: "json",
                        async: false,
                        type: "post",
                        success: function (r) {
                            if (r.code === "1") {
                                alert(r.message)
                                window.location.reload();
                            }else {
                                alert(r.message)
                            }
                        },
                        error: function (r) {
                            alert("修改失败")
                        }
                    })
                }
            } else {
                alert("选中要删除的");
            }
        })
    })
</script>